<template>
	<div class="front" style="padding: 10px 0;">
		<el-tree :data="treeData" :props="defaultProps" node-key="id" :default-expanded-keys="dfExpKeys" ref="tree" :indent="10" accordion @node-click="nodeClick" :default-expand-all="false" highlight-current :expand-on-click-node="false"></el-tree>
	</div>
</template>
<script>
export default {
	data() {
		return {
			treeData: [],
			defaultProps: {
				label: 'name',
				children: 'subCity'
			},
			dfExpKeys: []
		}
	},
	methods: {
		nodeClick(row) {
			this.$store.commit('cityDictionaryStore/updateProvinceId', row['id']);			//更新省份id
		},
		concatData() {
			let countryData = this.$store.state.cityDictionaryStore.countryData;
			let treeData = {
				id: countryData[0]['id'],
				code: countryData[0]['code'],
				name: countryData[0]['name'],
				parentId: countryData[0]['parentId'],
				locks: countryData[0]['locks'],
				subCity: []
			}
			this.$http.get('city/findProvince?parentId=' + treeData['id']).then(res => {		//通过国家id找到省份数据，然后拼接在国家的子集下面
				if(res.data.code == 20001) {
					if(res.data.data) {
						treeData['subCity'] = res.data.data;
						//设置高亮
						setTimeout(() => {
							this.$refs.tree.setCurrentKey(treeData['subCity'][0]['id']);
							this.$store.commit('cityDictionaryStore/updateProvinceId', treeData['subCity'][0]['id']);
						});
					}
				}
			});
			this.dfExpKeys = [treeData['id']];		//展开第一个节点
			this.treeData = [treeData];
		}
	},
	activated() {
		this.concatData();
	}
}
</script>